// 1.导入 Vue 和 VueRouter 包
import Vue from 'vue'
import VueRouter from 'vue-router'
import paths from '@/router/paths.js'

// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 导入 About 的子组件
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

import Main from '@/components/Main.vue'
import Login from '@/components/Login.vue'

import Users from '@/components/menus/Users.vue'
import MyUserDetail from '@/components/user/MyUserDetail.vue'
import Goods from '@/components/menus/Goods.vue'
import Rights from '@/components/menus/Rights.vue'
import Settings from '@/components/menus/Settings.vue'
import Orders from '@/components/menus/Orders.vue'

// 2.调用 Vue.use 函数把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 路由规则
const routes = [
  // 路由重定向
  { path: '/', redirect: '/login' },
  { path: '/home', component: Home },
  // 使用 : 设置动态路由，此处是希望根据 id 的值，展示对应电影的详细信息
  // props: true 表示可以为路由规则开启 props 传参，方便获取动态参数的值
  { path: '/movie/:id', component: Movie, props: true },
  {
    path: '/about',
    component: About,
    // 子路由，path 不能有 "/"
    children: [
      // 默认子路由的 path 为空，如果不用默认子路由，则使用重定向
      { path: '', component: Tab1 },
      { path: 'tab2', component: Tab2 }
    ]
  },
  {
    path: '/main',
    component: Main,
    redirect: '/main/users',
    children: [
      // 默认子路由的 path 为空，如果不用默认子路由，则使用重定向
      { path: 'users', component: Users },
      { path: 'userInfo/:id', component: MyUserDetail, props: true },
      { path: 'rights', component: Rights },
      { path: 'goods', component: Goods },
      { path: 'orders', component: Orders },
      { path: 'settings', component: Settings }
    ]
  },
  { path: '/login', component: Login }
]

// 3.创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，用来定义哈希地址和组件的对应关系
  routes
})

// 为 router 实例对象，设置全局前置导航守卫，控制访问权限
// 只要发生了路由导航跳转，就会触发 beforeEach 指定的 function 回调函数
// to 是将要访问的路由的信息对象
// from 是将要离开的路由的信息对象
// next 是一个函数，调用 next() 表示放行，允许这次路由导航
router.beforeEach((to, from, next) => {
  // 分析：
  // 要拿到用户将要访问的 hash 地址
  // 判断 hash 地址是否等于 /Main
  // 如果等于 /main，证明需要登陆之后，才能访问
  // 如果不等于 /main，则不需要登录，直接放行 next()
  if (paths.indexOf(to.path) !== -1) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

// 4.向外共享路由的实例对象
export default router
